import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../manager/item_detail_data_manager.dart';
import '../model/item_detail_do.dart';

class ItemXianyuhao extends StatefulWidget {
  const ItemXianyuhao({Key? key}) : super(key: key);

  @override
  State<ItemXianyuhao> createState() => _ItemXianyuhaoState();
}

class _ItemXianyuhaoState extends State<ItemXianyuhao> {
  @override
  Widget build(BuildContext context) {
    final ItemDetailDO itemDetailDO = Provider.of<ItemDetailDataManager>(context).itemDetailDO;
    return Container(
      color: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          _topWidget(),
          _userInfoDescWidget(),
          _dataWidget(itemDetailDO.xianyuhaoData),
          _buildItemList(itemDetailDO.sellerItems),
          Container(height: 8, color: const Color(0xFFF7F7F7),)
        ],
      ),
    );
  }

  Widget _buildItemList(List<String> sellerItems) {
    return Container(
      height: 92,
      margin: const EdgeInsets.only(top:16, bottom: 24),
      child: ListView.builder(
        padding: const EdgeInsets.only(left: 16, right: 16),
        itemCount: sellerItems.length,
        cacheExtent: 0,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            margin: const EdgeInsets.only(right: 4),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(4.5),
              child: Image.network(sellerItems[index], width: 92, height: 92, fit: BoxFit.cover,),
            ),

          );
        },
        scrollDirection: Axis.horizontal,
      ),
    );
  }

  Widget _userInfoDescWidget() {
    return Container(
      margin: const EdgeInsets.fromLTRB(14, 0, 16, 12),
      child: Stack(
        children: [
          Positioned(
              left: 0,
              top: 0,
              child: Image.asset(
                'assets/images/xyh_0.png',
                width: 16,
                height: 12,
              )),
          Positioned(
              child: Container(
                margin: const EdgeInsets.only(top: 4, left: 2),
                child: const Text(
                  '青青子衿，悠悠我心。但为君故，沉吟至今。',
                  style: TextStyle(
                    fontSize: 14,
                    color: Color(0xFF666666),
                  ),
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
              ))
        ],
      ),
    );
  }

  Widget _topWidget() {
    final ItemDetailDataManager itemDetailDataManager = Provider.of<ItemDetailDataManager>(context);
    return GestureDetector(
      onTap: () {
        // ...
      },
      child: Container(
        margin: const EdgeInsets.only(
          left: 16,
          right: 16,
          top: 8,
        ),
        color: Colors.white,
        height: 76,
        child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                margin: const EdgeInsets.only(right: 8.0),
                child: ClipRRect(
                  borderRadius: const BorderRadius.all(Radius.circular(20.0)),
                  child: Image.network(
                    itemDetailDataManager.itemDetailDO.avatarUrl,
                    width: 40.0,
                    height: 40.0,
                  ),
                ),
              ),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(itemDetailDataManager.itemDetailDO.nick,
                      style: const TextStyle(fontSize: 14.0, color: Color(0xFF333333), fontWeight: FontWeight.bold),
                      maxLines: 1,
                    ),
                    const Text('鱼小铺 | 沙发收纳用品实体店主',
                      style: TextStyle(fontSize: 12.0, color: Color(0xFF00C8EC), fontWeight: FontWeight.bold),
                      maxLines: 1,
                    ),
                  ],
                ),
              ),
              GestureDetector(
                child: Container(
                  alignment: Alignment.center,
                  margin: const EdgeInsets.only(left: 8.0),
                  child: Image.asset(
                    Provider.of<ItemDetailDataManager>(context).attention ? 'assets/images/un_attention.png' : 'assets/images/attention.png',
                    width: 64.0,
                    height: 32.0,
                  ),
                ),
                onTap: () {
                  setState(() {
                    itemDetailDataManager.attention = !itemDetailDataManager.attention;
                  });
                },
              ),
            ]),
      ),
    );
  }

  Widget _dataWidget(List<Map> items) {
    return Container(
      height: 88.0,
      decoration: const BoxDecoration(
        color: Color(0xFFFAFAFA),
        borderRadius: BorderRadius.all(Radius.circular(8)),
      ),
      margin: const EdgeInsets.only(
        left: 16,
        right: 16,
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children:
        List<Widget>.generate(items.length, (int index) {
          Map itemData = items[index];
            return Expanded(
              flex: 1,
              child: _buildTipWidget(itemData),
            );
          },
        ),
      ),
    );
  }

  Widget _buildTipWidget(Map itemData) {
    return Container(
      height: 88.0,
      margin: const EdgeInsets.only(left: 16, top: 1),
      padding: const EdgeInsets.only(top: 2),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              SizedBox(
                height: 16,
                child: Center(
                  child: Text(
                    itemData["title"] ?? '',
                    textScaleFactor: 1.0,
                    style: const TextStyle(
                      height: 1,
                      color: Color(0xff666666),
                      fontSize: 12,
                    ),
                  ),
                ),
              ),
            ],
          ),
          SizedBox(
            height: 28,
            child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Text(
                    itemData['data'],
                    style: const TextStyle(
                      fontSize: 20,
                      color: Color(0xff333333),
                      height: 1,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(top: 4, left: 1),
                    child: Text(
                        itemData['unit'],
                      style: const TextStyle(
                        fontSize: 12,
                        color: Color(0xff333333),
                        height: 1,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ]),
          ),
          Container(
            margin: const EdgeInsets.only(top: 4),
            height: 16,
            child: Center(
              child: Row(
                children: <Widget>[
                  Text(
                    itemData['desc'],
                    style: const TextStyle(
                      fontSize: 12,
                      color: Color(0xffa3a3a3),
                      height: 1,
                    ),
                  ),
                  Expanded(child: Container()),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
